<!doctype html>
<html>
    <head>
        <title>Custom interaction model with Dygraph</title>
        <script src="https://cdn.jsdelivr.net/npm/dygraph@2.0.0/dist/dygraph.min.js"></script>
        <style>
            #div_g3 {
                width: 600px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <h3>Custom interaction model</h3>
        <div id="div_g3" style="width: 600px; height: 300px"></div>
        <button id="restore3">Restore position</button>

        <script>
            // Sample data
            var data =
                'Date,Series1,Series2\n' +
                '2006-10-01,3.1,2.9\n' +
                '2006-10-02,3.6,3.8\n' +
                '2006-10-03,3.2,3.0\n' +
                '2006-10-04,3.8,3.5\n' +
                '2006-10-05,3.4,3.2'

            // Create the graph
            var g3 = new Dygraph(document.getElementById('div_g3'), data, {
                errorBars: true,
                interactionModel: {
                    mousedown: downV3,
                    mousemove: moveV3,
                    mouseup: upV3,
                    click: clickV3,
                    dblclick: dblClickV3,
                    mousewheel: scrollV3,
                },
            })

            // Restore position function
            document.getElementById('restore3').onclick = function () {
                restorePositioning(g3)
            }

            // Event handlers
            function downV3(event, g) {
                g.startZoom(event)
            }

            function moveV3(event, g) {
                g.moveToPoint(event)
            }

            function upV3(event, g) {
                g.endZoom(event)
            }

            function clickV3(event, g) {
                // Handle single click (e.g., show context menu)
                console.log('Single click detected')
            }

            function dblClickV3(event, g) {
                // Zoom in on double-click
                g.zoomIn()
            }

            function scrollV3(event, g) {
                // Zoom in/out using mouse wheel
                if (event.deltaY < 0) {
                    g.zoomIn()
                } else {
                    g.zoomOut()
                }
            }

            function restorePositioning(g) {
                // Restore to original zoom level
                g.resetZoom()
            }
        </script>
    </body>
</html>
